<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="shop-container">
		<!-- 积分 -->
		<view class="top">
			<view class="left">
				<view class="one">{{currentPoints}}</view>
				<view class="two">当前积分</view>
			</view>
			<view class="right">
				<view class="one">{{accumulatedPoints}}</view>
				<view class="two">累计积分</view>
			</view>
		</view>
		<view class="content">

			<!-- 积分明细 -->
			<view class="list">
				<view class="title">本月获取积分<text>{{gainPoints}}</text>使用 {{costPoints}}</view>
				<view class="select" @click="useOutClickSide">
					<easy-select size="mini" :options="options" ref="easySelect" :value="selectValue" @selectOne="selectOne"></easy-select>
				</view>
				<!-- 第二项 -->
				<view v-if="pointDetailList.length">
					<view class="point-list-item" v-for="item in pointDetailList" :key="item.id">
						<view class="list-info">
							<view>{{item.description}}</view>
							<view class="gain" v-if="item.type == 1">{{'+' + item.points}}</view>
							<view v-else>{{'-' + item.points}}</view>
						</view>
						<view class="date">{{item.time}}</view>
					</view>
					<view class="more" v-show="!haveMore1">没有更多明细了</view>
				</view>
				<!-- <view v-else>
					
					<view class="img">
						<image src="../../static/icon/9.png" mode=""></image>
					</view>
					<view class="tips">暂无明细</view>
				</view> -->
			</view>
			<view v-if="!pointDetailList.length && isLoad" style="height: 800rpx;background-color: #fff;">
				<van-empty description="暂无明细"></van-empty>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	// import Tab from '../../components/tab/tab.vue'
	import easySelect from '@/components/easy-select/easy-select.vue'
	import dayjs from 'dayjs'

	export default {
		computed: {
			...mapState(['fontSize'])
		},
		data() {
			return {
				isLoad: false,
				// tabCurrentIndex: 0,
				selectValue: '全部',
				options: [{
					value: null,
					label: '全部'
				}, {
					value: 1,
					label: '获取'
				}, {
					value: 2,
					label: '使用'
				}],
				point: {},
				params: {
					projId: uni.getStorageSync('projId'),
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params1: {
					projId: uni.getStorageSync('projId'),
					residentId: uni.getStorageSync('userInfo').id,
					startTime: null,
					endTime: null,
					type: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				pointDetailList: [],
				params2: {
					projId: uni.getStorageSync('projId'),
					residentId: uni.getStorageSync('userInfo').id,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				recordList: [],
				goodList: [],
				pictureList: [],
				iconList: [],
				goodsImg: {},
				recordImg: {},
				haveMore: true,
				haveMore1: true,
				haveMore2: true,
				currentPoints: 0,
				accumulatedPoints: 0,
				gainPoints: 0,
				costPoints: 0,
				startTime: null,
				endTime: null,
				userInfo: uni.getStorageSync('userInfo')
			}
		},
		components: {
			'easy-select': easySelect
		},

		onLoad(options) {
			// 页面显示是默认选中第一个
			// this.tabCurrentIndex = 0;
			this.getPointAcount()
			// if(uni.getStorageSync('checkStatus') == 2){
			// 	this.getPointAcount()
			// }
			this.getPointDetail()
		},
		onReachBottom() {
			if (this.haveMore1) {
				this.getMorePointDetail()
			}
		},
		onPullDownRefresh() {
			this.getPointAcount()
		},
		onShow() {
			// this.getRecordList()
		},
		methods: {

			getMorePointDetail() {
				uni.showLoading({
					title: '加载中'
				});
				this.params1.pagination.current++
				this.$http.post('wx/points/list', this.params1).then(res => {
					console.log(res, '更多明细')
					uni.hideLoading()
					if (res.code === 10000) {
						res.data.list.forEach(item => {
							item.time = dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
						})
						this.pointDetailList = this.pointDetailList.concat(res.data.list)
						if (this.pointDetailList.length == res.data.total) {
							this.haveMore1 = false
						}
					}
				})
			},
			goGoodsDetail(id) {
				uni.navigateTo({
					url: '../goodsDetail/goodsDetail?id=' + id
				})
			},
			goOrderDetail(id) {
				uni.navigateTo({
					url: '../orderDetail/orderDetail?id=' + id
				})
			},

			selectOne(options) {
				this.selectValue = options.label
				// console.log(options.value)
				this.params1.type = options.value
				this.getPointDetail()
			},
			useOutClickSide() {
				this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
			// 积分查询
			getPointAcount() {
				this.startTime = dayjs(this.formatFirstTime()).format("YYYY-MM-DDTHH:mm:ssZ")
				this.endTime = dayjs(this.formatDateTime()).format("YYYY-MM-DDTHH:mm:ssZ")
				this.$http.post('wx/points/account', {
					projId: uni.getStorageSync('projId'),
					residentId: uni.getStorageSync('userInfo').id,
					startTime: this.startTime,
					endTime: this.endTime
				}).then(res => {
					uni.hideLoading()
					console.log(res, '积分查询')
					if (res.code === 10000) {
						// console.log(res, '积分')
						this.point = res.data
						this.currentPoints = res.data.currentPoints
						this.accumulatedPoints = res.data.accumulatedPoints
						this.gainPoints = res.data.gainPoints
						this.costPoints = res.data.costPoints
					}
				})
			},
			// 获取积分明细
			getPointDetail() {
				uni.showLoading()
				this.params1.pagination.current = 1

				this.$http.post('wx/points/list', this.params1).then(res => {
					console.log(res, '积分明细')
					if (res.code === 10000) {
						this.isLoad = true
						this.pointDetailList = res.data.list
						this.pointDetailList.forEach(item => {
							item.time = dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
						})
					}
				})
			},
			// 下载文件
			downloadFile(id, goodId) {
				this.$http.post('common/file/download', {
					id: id
				}).then(res => {
					// console.log(res, '下载文件')
					if (res.code === 10000) {
						// this.tempPath = res.data.fileName
						this.goodsImg[goodId] = {
							fileData: res.data.fileData
						}
						this.pictureList.push(res.data.fileData)
					}
				})
			},
			download(icon, recordId) {
				this.$http.post('common/file/download', {
					id: icon
				}).then(res => {
					if (res.code === 10000) {
						this.iconList.push(res.data.fileData)
						this.recordImg[recordId] = {
							fileData: res.data.fileData
						}
					}
				})
			},
			// 当前时间月份的第一天
			formatFirstTime() {
				let data = new Date()
				data.setDate(1)
				data.setHours(0)
				data.setSeconds(0)
				data.setMinutes(0)
				return data
			},
			// 当前时间
			formatDateTime() {
				let date = new Date()
				return date
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #f5f5f5;
	}

	.shop-container {
		.top {
			height: 250rpx;
			background-color: $theme-color;
			// background: url(../../static/icon/beijing.png) no-repeat;
			// background-size: 750rpx 250rpx;
			display: flex;
			color: #fff;

			.left {
				flex: 1;
				margin-top: 30rpx;
				text-align: center;
				position: relative;
				height: 68rpx;
				border-right: 2px solid #fff;

				.one {
					font-size: 36rpx;
					font-weight: bold;
				}

				.two {
					font-size: 28rpx;
					position: absolute;
					// bottom: -24rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			.right {
				flex: 1;
				margin-top: 30rpx;
				height: 68rpx;
				text-align: center;
				position: relative;

				.one {
					font-size: 36rpx;
					font-weight: bold;
				}

				.two {
					font-size: 28rpx;
					// bottom: -24rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.content {
			background: #F5F5F5;
			height: 100%;
		}

		.content {
			position: relative;
			top: -85rpx;
			width: 710rpx;
			margin: 0 20rpx;
			border-radius: 10rpx 10rpx 0 0;

			.list {
				width: 710rpx;
				background-color: #fff;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				border-radius: 10rpx 10rpx 0px 0px;
				.good_item {
					display: flex;
					flex-wrap: wrap;

					.good_bottom {
						width: 710rpx;
						height: 20rpx;
						background-color: #fff;
					}
				}

				.no_data {
					position: absolute;
					top: 100rpx;

					.img {
						width: 258rpx;
						height: 246rpx;
						margin: 67rpx 245rpx 34rpx 247rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.tips {
						margin: 0 315rpx 0 315rpx;
						width: 120rpx;
						height: 27rpx;
						font-size: 28rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 500;
						color: rgba(194, 194, 194, 1);
					}
				}

				.goods-item {
					width: 325rpx;
					height: 372rpx;
					border: 2rpx solid #B5B5B5;
					border-radius: 4px;
					margin: 20rpx 0 0 20rpx;
					padding-left: 20rpx;
					position: relative;

					.goods-img {
						width: 219rpx;
						height: 208rpx;
						margin: 19rpx 45rpx 21rpx 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						width: 280rpx;
						font-size: 30rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 550;
						color: #333333;
						margin-bottom: 6rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.score {
						color: #FF6D46;
						font-size: 28rpx;
						// margin-bottom: 6rpx;
					}

					.num {
						font-size: 26rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
					}

					.shortage {
						width: 325rpx;
						height: 372rpx;
						background: #E2E2E2;
						border: 1rpx solid #B5B5B5;
						opacity: 0.6;
						border-radius: 4px;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
					}

					.word {
						color: #FF0000;
						font-size: 36rpx;
						font-weight: bold;
						position: absolute;
						left: 110rpx;
						top: 149rpx;
						// z-index: 99;
					}
				}

				.title {
					font-size: 32rpx;
					position: relative;
					color: #333333;
					height: 60rpx;
					line-height: 60rpx;
					font-weight: 600;
					font-family: Noto Sans S Chinese;
					margin-top: 10rpx;
					margin-left: 20rpx;
					margin-bottom: 10rpx;

					text {
						color: #FF6D46;
						margin: 0 20rpx;
					}
				}

				.point-list-item {				
					width: 100%;
					padding-top: 40rpx;
					border-bottom: 2rpx solid #eee;
					padding: 0 35rpx 26rpx 20rpx;

					.date {			
						width: 100%;
						text-align: left;
						padding-right: 35rpx;
						color: #CCCCCC;
						font-size: 28rpx;
					}

					.list-info {
						width: 690rpx;
						padding-right: 34rpx;
						font-size: 30rpx;
						font-family: Noto Sans S Chinese;
						margin-bottom: 13rpx;
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;

						.gain {
							color: #FF7B59;
						}
					}
				}

				.select {
					// height: 40rpx;
					font-size: 20rpx;
					position: absolute;
					top: 20rpx;
					right: 33rpx;
					// border: 1rpx solid #B5B5B5;
				}

				.easy-select .easy-select-options-item {
					font-size: 20rpx;
				}

				.easy-select .active {
					background-color: #EEE
				}

				.more {
					font-size: 28rpx;
					color: #ccc;
					margin-top: 20rpx;
					margin-left: 260rpx;
				}
			}

			.exchange_record {
				.more {
					font-size: 28rpx;
					color: #ccc;
					margin-top: 20rpx;
					margin-left: 260rpx;
				}

				.no_data {
					position: absolute;
					top: 100rpx;

					.img {
						width: 258rpx;
						height: 246rpx;
						margin: 67rpx 245rpx 34rpx 247rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.tips {
						margin: 0 315rpx 0 315rpx;
						width: 120rpx;
						height: 27rpx;
						font-size: 28rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 500;
						color: rgba(194, 194, 194, 1);
					}
				}
			}

			.score-item {
				width: 100%;
				height: 156rpx;
				background-color: #fff;
				display: flex;
				margin-bottom: 20rpx;
				position: relative;
				padding: 50rpx 30rpx 30rpx 30rpx;
				position: relative;

				.time {
					position: absolute;
					left: 21rpx;
					top: 19rpx;
					color: #CCCCCC;
					font-size: 26rpx;
				}

				.left {
					width: 76rpx;
					height: 76rpx;
					margin-right: 14rpx;
					margin-top: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					.right-top {
						display: flex;
						width: 554rpx;
						justify-content: space-between;

						.one {
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							.goods-name {
								color: #333333;
								font-size: 28rpx;
								margin-right: 24rpx;
							}

							.status {
								width: 72rpx;
								height: 28rpx;
								line-height: 26rpx;
								border: 2rpx solid #FB6A6A;
								color: #FB6A6A;
								text-align: center;
								font-size: 22rpx;
							}

							.ready {
								width: 72rpx;
								height: 28rpx;
								line-height: 26rpx;
								border: 2rpx solid #25C735;
								color: #25C735;
								text-align: center;
								font-size: 22rpx;
							}
						}

						.two {
							padding-top: 10rpx;

							.jifen {
								font-size: 28rpx;
							}

							.arrow {
								position: absolute;
								top: 67rpx;
								right: 16rpx;
								transform: rotate(45deg);
								width: 24rpx;
								height: 24rpx;
								color: #9F9F9F;
								border-top: 2rpx solid #999999;
								border-right: 2rpx solid #999999;
							}
						}
					}

					.right-bottom {
						font-size: 28rpx;
						color: #999;
						margin-top: 12rpx;
					}
				}
			}
		}

		.navbar {
			display: flex;
			width: 710rpx;
			height: 85rpx;
			padding: 0 5px;
			background: #fff;
			border-radius: 10px 10px 0px 0px;
			position: relative;
			z-index: 10;
			border-bottom: 2rpx solid #eee;

			.nav-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				font-size: 26rpx;
				color: #333;
				position: relative;
				font-weight: bold;

				&.current {
					color: #42ADFF;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 110rpx;
						height: 0;
						border-bottom: 4rpx solid #42ADFF;
					}
				}
			}
		}
	}
</style>
